{% load static %}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>test</title>
	<link rel="stylesheet" href="{% static 'plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css' %}" />
	<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" />
	<script src="{% static 'js/jquery.min.js' %}"></script>
	<script src="{% static 'plugins/bootstrap-4.6.2-dist/js/bootstrap.min.js' %}"> </script>

	<link rel="stylesheet"
		href="{% static '/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css' %}" />
	<script src="{% static 'plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js' %}"></script>
	<script src="{% static 'plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js' %}">
	</script>
</head>

<body>
	<form class="form-horizontal" style="border: 1px red solid;margin-top: 30px;">
		<div class="container">
			<div class="row">
				<div class="form-group col-sm-6">
					<label for="name" class="col-sm-2 control-label">姓名</label>
					<div class="col-sm-10">
						<input type="text" id="name" class="form-control">
					</div>

				</div>
				<div class="form-group col-sm-6">
					<label for="age" class="col-sm-2 control-label">年龄</label>
					<div class="col-sm-10">
						<input type="text" id="age" class="form-control">
					</div>

				</div>
			</div>
			<div class="row">
				<div class="form-group col-sm-6">
					<label for="salary" class="col-sm-2 control-label">薪资</label>
					<div class="col-sm-10">
						<input type="text" id="salary" class="form-control">
					</div>

				</div>
				<div class="form-group col-sm-6">
					<label for="department" class="col-sm-2 control-label">部门</label>
					<div class="col-sm-10">
						<select id="department" class="form-control">
							<option value="">IT</option>
							<option value="">教育</option>
							<option value="">服务</option>
							<option value="">公检</option>
							<option value="">托管</option>
						</select>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group col-sm-6">
					<label for="datetime" class="col-sm-2 control-label">入职日期</label>
					<div class="col-sm-10">
						<input type="text" id="datetime" class="form-control" placeholder="年 / 月 / 日">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="form-group col-sm-6">
					<div class="col-sm-offset-2 col-sm-3">
						<button type="submit" class="btn btn-primary form-control">提交</button>
					</div>
				</div>
			</div>
		</div>
	</form>


	<script type="text/javascript">
		$('#datetime').datetimepicker({
			language: 'zh-CN', //显示中文
			format: 'yyyy-mm-dd', //显示格式
			autoclose: true, //选中自动关闭
			todayBtn: true, //显示今日按钮
			todayHighlight: true, // 今日高亮显示
			weekStart: 1, //一周从哪一天开始。0（星期日）到6（星期六）	
			startDate: "2021-1-1", //日期选取的起始时间
			minView: "month", // 最小视图为月份，如果为 day 的话还会让你选小时
			daysOfWeekDisabled: '0', // 哪天不可选 0（星期日）到6（星期六）	
			endDate: new Date(), //日期选取的截止时间，因为入职日期最多填写到今天，所以可以直接用new Date()，表示当天

		})
	</script>




	<!-- Button trigger modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
		Launch static backdrop modal
	</button>

	<!-- Modal -->
	<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
		aria-labelledby="staticBackdropLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					...
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Understood</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 16:9 aspect ratio -->
	<div class="embed-responsive embed-responsive-16by9">
		<iframe class="embed-responsive-item"
			src="https://v1.kwaicdn.com/ksc2/K4AVI0-AH1AFDZLV0lRoX-d9z-8S2cbeLDHA_Ndfz5ZopOsd9NvlBWpNXkh9hHgxP0n4OPsDXmJF-uT3ei5M-fnEokolz3QuF5yyW6b2Js-RuzOQO7LRU7-8xArmaHAIpRah_g040kvFzIcj1Q3E2GsjlhkmIpiTZycyd6oMii2YcGV_JdljlR5xGohzPTGt.mp4?pkey=AAWauIZ0EIjTTTtgzyBE4UnTMc1Sd9eGhYpGf8ts89-hxmZWb9nJIVYwg1k_k_0Gm-oxbnbZ7AkpQc-NsDMXqvXy9ODb7YPkj02lC4L8geBFtsvPuUY1en6e1MPjan8pHdQ&tag=1-1710990461-unknown-0-rzl7imkize-7f54302a34c2b5fa&clientCacheKey=3x4ghinfqd7y28q_hd15.mp4&di=e13ac8e&bp=14944&tt=hd15&ss=vp"></iframe>
	</div>
	<div class="embed-responsive embed-responsive-4by3">
		<iframe class="embed-responsive-item"
			src="https://v1.kwaicdn.com/ksc2/K4AVI0-AH1AFDZLV0lRoX-d9z-8S2cbeLDHA_Ndfz5ZopOsd9NvlBWpNXkh9hHgxP0n4OPsDXmJF-uT3ei5M-fnEokolz3QuF5yyW6b2Js-RuzOQO7LRU7-8xArmaHAIpRah_g040kvFzIcj1Q3E2GsjlhkmIpiTZycyd6oMii2YcGV_JdljlR5xGohzPTGt.mp4?pkey=AAWauIZ0EIjTTTtgzyBE4UnTMc1Sd9eGhYpGf8ts89-hxmZWb9nJIVYwg1k_k_0Gm-oxbnbZ7AkpQc-NsDMXqvXy9ODb7YPkj02lC4L8geBFtsvPuUY1en6e1MPjan8pHdQ&tag=1-1710990461-unknown-0-rzl7imkize-7f54302a34c2b5fa&clientCacheKey=3x4ghinfqd7y28q_hd15.mp4&di=e13ac8e&bp=14944&tt=hd15&ss=vp"></iframe>
	</div>
	<script>
		$('#staticBackdrop').on('shown.bs.modal', function () {
			$('#myInput').trigger('focus')
		})
	</script>





	<!DOCTYPE html>
	<html>

	<head>
		<title>AJAX Example</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			$(document).ready(function () {
				$("#loadButton").click(function () {
					$.ajax({
						url: "data.txt", // 服务器上的文件路径
						type: "GET", // 请求类型为GET
						dataType: "text", // 数据格式为文本
						success: function (response) {
							// 请求成功时的处理逻辑
							$("#content").html(response); // 将返回的数据更新到页面中的指定元素
						},
						error: function (xhr, status, error) {
							// 请求失败时的处理逻辑
							alert("Error: " + error);
						}
					});
				});
			});
		</script>
	</head>

	<body>
		<button id="loadButton">Load Data</button>
		<div id="content"></div>
	</body>

	</html>







</body>

</html>